<template>
<div>

    <div class="m-container" v-title="'grid 栅格系统'">

        <div class="row">
            <div class="m-col-xs-1">m-col-xs-1</div>
            <div class="m-col-xs-2">m-col-xs-2</div>
            <div class="m-col-xs-1">m-col-xs-3</div>
            <div class="m-col-xs-1">m-col-xs-4</div>
            <div class="m-col-xs-1">m-col-xs-5</div>
            <div class="m-col-xs-1">m-col-xs-6</div>
            <div class="m-col-xs-1">m-col-xs-7</div>
            <div class="m-col-xs-1">m-col-xs-8</div>
            <div class="m-col-xs-1">m-col-xs-9</div>
            <div class="m-col-xs-1">m-col-xs-10</div>
            <div class="m-col-xs-1">m-col-xs-11</div>
        </div>
        <div class="row">
            <div class="m-col-sm-2">m-col-sm-2</div>
            <div class="m-col-sm-1">m-col-sm-2</div>
            <div class="m-col-sm-3">m-col-sm-3</div>
            <div class="m-col-sm-1">m-col-sm-4</div>
            <div class="m-col-sm-3">m-col-sm-3</div>
            <div class="m-col-sm-1">m-col-sm-6</div>
            <div class="m-col-sm-1">m-col-sm-7</div>
        </div>
        <div class="row">
            <div class="m-col-md-1">m-col-md-2</div>
            <div class="m-col-md-1">m-col-md-3</div>
            <div class="m-col-md-1">m-col-md-4</div>
            <div class="m-col-md-6">m-col-md-6</div>
            <div class="m-col-md-1">m-col-md-6</div>
            <div class="m-col-md-1">m-col-md-7</div>
            <div class="m-col-md-1">m-col-md-8</div>
        </div>
        <div class="row">
            <div class="m-col-lg-1">m-col-lg-1</div>
            <div class="m-col-lg-1">m-col-lg-2</div>
            <div class="m-col-lg-1">m-col-lg-3</div>
            <div class="m-col-lg-5">m-col-lg-5</div>
            <div class="m-col-lg-1">m-col-lg-5</div>
            <div class="m-col-lg-1">m-col-lg-6</div>
            <div class="m-col-lg-2">m-col-lg-2</div>
            <div class="m-col-lg-12">m-col-lg-12</div>
        </div>
    </div>
    <div class="m-container">
        <div class="row">
            <div class="m-col-md-2 m-col-md-offset-3">m-col-md-2 m-col-md-offset-3</div>
            <div class="m-col-md-2 m-col-md-offset-3 m-col-xs-offset-2">m-col-md-2 m-col-md-offset-3 m-col-xs-offset-2</div>
        </div>
    </div>
    <div class="m-container">
        <div class="row">
            
            <div class="m-col-md-8 m-col-md-push-4">m-col-md-8 m-col-md-push-4</div>
            <div class="m-col-md-4 m-col-md-pull-8">m-col-md-4 m-col-md-pull-8</div>
        </div>
    </div>
    <div class="m-container">
        <div class="row">
            <div class="m-col-xs-6 m-col-md-4">m-col-xs-6 m-col-md-4</div>
            <div class="m-col-xs-6 m-col-md-4">m-col-xs-6 m-col-md-4</div>
            <div class="m-col-xs-12 m-col-md-4">m-col-xs-12 m-col-md-4</div>
        </div>
        <div class="row">
            <div class="m-col-xs-3 m-col-sm-12 m-col-md-6 m-col-lg-2">m-col-xs-3 m-col-sm-12 m-col-md-6 m-col-lg-2</div>
            <div class="m-col-xs-3 m-col-md-6 m-col-lg-4">m-col-xs-3 m-col-md-6 m-col-lg-4</div>
            <div class="m-col-xs-3 m-col-md-6 m-col-lg-4">m-col-xs-3 m-col-md-6 m-col-lg-4</div>
            <div class="m-col-xs-4 m-col-sm-12 m-col-md-6 m-col-lg-2">m-col-xs-4 m-col-sm-12 m-col-md-6 m-col-lg-2</div>
        </div>
    </div>
    <div class="m-container-fluid" v-title="'grid 栅格系统'">

        <div class="row">
            <div class="m-col-xs-1">m-col-xs-1</div>
            <div class="m-col-xs-2">m-col-xs-2</div>
            <div class="m-col-xs-1">m-col-xs-3</div>
            <div class="m-col-xs-1">m-col-xs-4</div>
            <div class="m-col-xs-1">m-col-xs-5</div>
            <div class="m-col-xs-1">m-col-xs-6</div>
            <div class="m-col-xs-1">m-col-xs-7</div>
            <div class="m-col-xs-1">m-col-xs-8</div>
            <div class="m-col-xs-1">m-col-xs-9</div>
            <div class="m-col-xs-1">m-col-xs-10</div>
            <div class="m-col-xs-1">m-col-xs-11</div>
        </div>
        <div class="row">
            <div class="m-col-sm-1">m-col-sm-1</div>
            <div class="m-col-sm-1">m-col-sm-2</div>
            <div class="m-col-sm-1">m-col-sm-3</div>
            <div class="m-col-sm-1">m-col-sm-4</div>
            <div class="m-col-sm-1">m-col-sm-5</div>
            <div class="m-col-sm-1">m-col-sm-6</div>
            <div class="m-col-sm-1">m-col-sm-7</div>
            <div class="m-col-sm-1">m-col-sm-8</div>
            <div class="m-col-sm-1">m-col-sm-9</div>
            <div class="m-col-sm-1">m-col-sm-10</div>
            <div class="m-col-sm-1">m-col-sm-11</div>
            <div class="m-col-sm-1">m-col-sm-12</div>
        </div>
        <div class="row">
            <div class="m-col-md-1">m-col-md-1</div>
            <div class="m-col-md-1">m-col-md-2</div>
            <div class="m-col-md-1">m-col-md-3</div>
            <div class="m-col-md-1">m-col-md-4</div>
            <div class="m-col-md-1">m-col-md-5</div>
            <div class="m-col-md-1">m-col-md-6</div>
            <div class="m-col-md-1">m-col-md-7</div>
            <div class="m-col-md-1">m-col-md-8</div>
            <div class="m-col-md-1">m-col-md-9</div>
            <div class="m-col-md-1">m-col-md-10</div>
            <div class="m-col-md-1">m-col-md-11</div>
            <div class="m-col-md-1">m-col-md-12</div>
        </div>
        <div class="row">
            <div class="m-col-lg-1">m-col-lg-1</div>
            <div class="m-col-lg-1">m-col-lg-2</div>
            <div class="m-col-lg-1">m-col-lg-3</div>
            <div class="m-col-lg-5">m-col-lg-5</div>
            <div class="m-col-lg-1">m-col-lg-5</div>
            <div class="m-col-lg-1">m-col-lg-6</div>
            <div class="m-col-lg-2">m-col-lg-2</div>
            <div class="m-col-lg-12">m-col-lg-12</div>
        </div>
    </div>

</div>
</template>

<style scoped>
/*@import '../../assets/less/grid';*/

.m-container{
    margin-bottom: 15px;
}
.row div{
    background: #F5F7FF;
    line-height: 30px;
    border-left: solid 1px #C1D1FC;
    border-bottom: solid 1px #C1D1FC;
    text-align: center;

    white-space: nowrap;/*文本不换行*/
    text-overflow: ellipsis;
    overflow: hidden;/*以上三行实现溢出显示省略号*/
}
.row:first-child div{
    border-top: solid 1px #C1D1FC;
}
.row div:last-child{
    border-right: solid 1px #C1D1FC;
}
.row div:nth-child(odd) {
    background: #E3E8FC;
}
</style>
